<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="">
        <el-input clearable @clear="search()" v-model="pageDto.where.name" placeholder="请输入设备名称"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input clearable @clear="search()" v-model="pageDto.where.deviceKey" placeholder="请输入设备标识"></el-input>
      </el-form-item>

      <el-form-item>
        <el-select v-model="pageDto.where.typeName" placeholder="请选择设备类型">
          <el-option v-for="item in typeList" :value="item.name" :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="pageDto.where.active" placeholder="请选择设备激活状态">
          <el-option v-for="item in activeList" :value="item.id" :label="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="search()">查询</el-button>
        <el-button icon="el-icon-delete" @click="deleteItem()" type="danger">清空</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="deviceList" stripe style="width: 100%">
      <el-table-column prop="name" label="设备名称" width="100">
      </el-table-column>
      <el-table-column prop="deviceKey" label="设备标识" width="220">
      </el-table-column>
      <el-table-column prop="typeName" label="设备类型" width="120">
      </el-table-column>
      <el-table-column prop="productName" label="所属产品" width="120">
      </el-table-column>
      <el-table-column prop="parentId" label="父设备" width="70">
        <template slot-scope="scope">
          {{ scope.row.parentId == 1 ? "有" : "无" }}
        </template>
      </el-table-column>
      <el-table-column prop="tenantName" label="所属租户" width="100">
      </el-table-column>
      <el-table-column prop="active" label="激活状态" width="100">
        <template slot-scope="scope">
          {{ scope.row.active == 1 ? "未激活" : "激活" }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建日期" width="200">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="sendMsg(scope.row)" icon="el-icon-edit" type="primary" size="mini">发送指令</el-button>
          <el-button @click="deleteDev(scope.row.id)" icon="el-icon-delete" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="float: right" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pageDto.now" :page-sizes="[5, 15, 50, 100]" :page-size="pageDto.size"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>
<script>
import { page, typeList, activeList, deleteDevice } from "@/api/device";
export default {
  data() {
    return {
      pageDto: {
        now: 1,
        size: 5,
        where: {
          name: "",
          productName: "",
          deviceKey: "",
          tenantName: "",
          typeName: "",
          active: "",
        },
      },
      total: 0,
      deviceList: [],
      typeList: [],
      activeList: [],
    };
  },
  methods: {
    search() {
      page(this.pageDto).then((res) => {
        this.deviceList = res.list;
        this.total = res.total;
      });
    },
    handleSizeChange(size) {
      this.size = size;
      this.search();
    },
    handleCurrentChange(page) {
      this.pageDto.now = page;
      this.search();
    },
    allType() {
      typeList().then((res) => {
        this.typeList = res.data;
      });
    },
    deleteItem() {
      this.pageDto.where.name = "";
      this.pageDto.where.deviceKey = "";
      this.pageDto.where.typeName = "";
      this.pageDto.where.areaName = "";
      this.pageDto.where.active = "";
      this.search();
    },
    activeList1() {
      activeList().then((res) => {
        this.activeList = [
          { id: 1, name: "未激活" },
          { id: 2, name: "已激活" },
        ];
      });
    },
    deleteDev(id) {
      this.$confirm("此操作将永久删除该设备, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteDevice(id).then((res) => {
          if (res.code == 200) {
            this.search();
          }
          this.$message({
            message: res.ok ? "删除成功" : "删除失败",
            type: res.code == 200 ? "success" : "error",
          });
        });
      });
    },
    sendMsg() {
      alert("已发送");
    },
  },
  created() {
    this.search();
    this.allType();
    this.activeList1();
  },
};
</script>
